<template>
	<view :style="{'--page-bg':pageBg}" style="float: left;width: 100%;height: 100%;" >
		<view class="item_box_title  css-theme" :class="[cueTheme]"  >
			<view style="float: left;width: 100%;text-align: center;font-size: 24px;font-weight: bolder;padding-top: 10px;">
				新增事件记录</view>
		</view>
		<scroll-view scroll-y style="height: 80%;position: absolute;padding-top: 60px;" >
			<view style="float: left;width: 100%;padding:0px 20px;">
				<view class="item_box_title  css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">时间</view>
				</view>
				<u-picker :default-time="recordTime" mode="time" v-model="picker_show" @confirm="onDateChange"
					:params="params" style="z-index: 10;">
				</u-picker>
				<view @click="picker_show = true" class="container_box  css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<input v-model="recordTime" type="text" placeholder="请输入"
							placeholder-class="placeholder_style" />
					</view>
				</view>
				<view style="float: left;width: 100%;" v-for=" (item,index) in configArray" :key="'configArray'+index">
					<!-- 数值 -->
					<view style="float: left;width: 100%;" v-if="item.type == 1">
						<view class="item_box_title  css-theme" :class="[cueTheme]">
							<view style="float: left;width: 100%;">{{item.name}}<text v-if="item.required == 1"
									style="color: red;">*</text></view>
						</view>
						<view class="container_box  css-theme" :class="[cueTheme]">
							<view class="container_box_left">
								<input v-model="variablesArray[index]" type="number" placeholder="请输入"
									placeholder-class="placeholder_style" />{{item.unit}}
							</view>
						</view>
					</view>
					<!-- 文本 -->
					<view style="float: left;width: 100%;" v-if="item.type == 2">
						<view class="item_box_title  css-theme" :class="[cueTheme]">
							<view style="float: left;width: 100%;">{{item.name}}<text v-if="item.required == 1"
									style="color: red;">*</text></view>
						</view>
						<view class="container_box  css-theme" :class="[cueTheme]">
							<view class="container_box_left">
								<input v-model="variablesArray[index]" type="text" placeholder="请输入"
									placeholder-class="placeholder_style" />
							</view>
						</view>
					</view>
					<!-- 单选 -->
					<view style="float: left;width: 100%;" v-if="item.type == 3">
						<view class="item_box_title  css-theme" :class="[cueTheme]">
							<view style="float: left;width: 100%;">{{item.name}}<text v-if="item.required == 1"
									style="color: red;">*</text></view>
						</view>
						<view class="container_box  css-theme" :class="[cueTheme]">
							<view class="container_box_left">
								<radio-group style="float:left;width: 100%;"
									@change="event => radioChange(event, item, index)">
									<label v-for="(item, index) in item.property" :key="item.value"
										:class="index === current?'option_active item_box':'option_default item_box'">
										<view class="radioHidden" style="float: left;">
											<radio :value="item.name" :checked="index === current" />
										</view>
										<view style="float: left;">{{item.name}}</view>
									</label>
								</radio-group>
			
							</view>
						</view>
					</view>
					<!-- 多选 -->
					<view style="float: left;width: 100%;" v-if="item.type == 4">
						<view class="item_box_title  css-theme" :class="[cueTheme]">
							<view style="float: left;width: 100%;">{{item.name}}<text v-if="item.required == 1"
									style="color: red;">*</text></view>
						</view>
						<view class="container_box  css-theme" :class="[cueTheme]">
							<view class="container_box_left">
								<checkbox-group style="float:left;width: 100%;"
									@change="event => checkboxChange(event, item, index)">
									<label v-for="(item, index) in item.property" :key="item.name"
										:class="item.checked?'option_active item_box':'option_default item_box'">
										<view class="checkboxHidden" style="float: left;">
											<checkbox :value="item.name" :checked="item.checked" />
										</view>
										<view style="float: left;">{{item.name}}</view>
									</label>
								</checkbox-group>
			
			
							</view>
						</view>
					</view>
					<!-- 开关 -->
					<view style="float: left;width: 100%;" v-if="item.type == 5">
						<view class="item_box_title  css-theme" :class="[cueTheme]">
							<view style="float: left;width: 100%;">{{item.name}}</view>
						</view>
						<view class="container_box  css-theme" :class="[cueTheme]">
							<view class="container_box_left">
								<tn-switch v-model="variablesArray[index]" :size="36" activeColor="#18B998"></tn-switch>
							</view>
						</view>
					</view>
					<view style="float: left;width: 100%;" v-if="item.type == 6">
						<view class="item_box_title  css-theme" :class="[cueTheme]">
							<view style="float: left;width: 100%;">{{item.name}}<text v-if="item.required == 1"
									style="color: red;">*</text></view>
						</view>
						<view class="container_box  css-theme" :class="[cueTheme]">
							<view class="container_box_left" style="display:block;text-align: center;">
								<view class="view_class" v-if="!variablesArray[index]" @click="uploadImg(index)">
									<view class="tn-icon-image" style="font-size: 38px;"></view>
									<!-- <br> -->
									<view class="view_desc">点击上传图片</view>
								</view>
								<image v-else @click="uploadImg(index)" class="uploadImage_show"
									style="width: 100px; height: 100px;" :src="globalUrl+variablesArray[index]"
									mode="aspectFit">
								</image>
							</view>
						</view>
					</view>
			
				</view>
			
				<view class="item_box_title  css-theme" :class="[cueTheme]">
					<view style="float: left;width: 100%;">备注</view>
				</view>
				<view class="container_box  css-theme" :class="[cueTheme]">
					<view class="container_box_left">
						<textarea class="textarea" style="height: 200rpx;" maxlength="100" v-model="recordRemark"
							placeholder="请输入" placeholder-class="placeholder_style"></textarea>
					</view>
				</view>
				
			</view>
		</scroll-view>
		<view class="category-item">
			<view class="save_btn"  @click="saveTimePlan()">保存</view>
		</view>
	</view>
</template>
<script>
	var _self;
	import mytime from '@/common/mytime.js';
	import icons from '@/common/icon.js'
	import dayjs from '@/dayjs.min.js'
	export default {
		name: 'marktime',
		props: {
			configArray: {
				type: Array, 
				default () {
					return []
				}
			},
			itemThingCheck: {
				type: Object, 
				default () {
					return  {}
				}
			},
			recordTime: {
				type: String, 
				drequired: true
			},
		},
		data() {
			return {
				globalUrl: getApp().globalData.url,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				picker_show: false,
				mytime: mytime,
				modal_show: false,
				itemCheck: {},
				show_popup_bottom_thingAdd: false,
				show_popup_bottom_addRecord: false,
				show_popup: false,
				isActive: 0,
				index: 0,
				currentindex: 0,
				category: [],
				scrollLeft: 0, // 横向滚动条位置
				fullHeight: "",
				fullHeightNumber: 0,
				itemList: [],
				typeId: 0,
				iconList: [],
				arrayClass: [{
					id: 0,
					name: '请选择'
				}],
				indexSelectClass: 0,
				indexSelectClassId: 0,
				show_popup_bottom: false,
				itemThingRecordList: [],
				// recordTime: '',
				recordRemark: '',
				// itemThingCheck: {},
				// configArray: [],
				current: '',
				content: [],
				logo_list: '',
				checkValue: [],
				variablesArray: [],
			}
		},
		watch: {
			recordTime(newVal) {
			      console.log('recordTime updated:', newVal);
			    }
		
		},
		created() {
			// this.recordTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
			
		},
		methods: {
			onDateChange(e) {
			
				this.recordTime = e.year + '-' + e.month + "-" + e.day +
					" " + e.hour + ":" + e.minute + ":" + e.second;
			
			},
			
			uploadImg(index) {
				var _self=this
				// 项目实战中使用
				uni.chooseImage({
					count: 1, // 图片数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择或者拍照
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
			
						// _self.show_popup_bottom = true
						// _self.imageSrc = tempFilePaths[0]
						uni.compressImage({
							src: tempFilePaths[0], // 图片路径
							quality: 10, // 压缩质量，范围为0 - 100，100为不压缩
							success: (compressRes) => {
								// 获取压缩后的图片路径
								const compressedFilePath = compressRes.tempFilePath;
								// 执行上传操作
								uni.uploadFile({
									url: _self.globalUrl + '/common/upload', //上传图片api
									filePath: compressedFilePath,
									name: 'file',
									formData: {
										// 其他要上传的参数
									},
									success: (uploadRes) => {
										console.log('上传成功', uploadRes);
										let imgValue = JSON.parse(uploadRes.data)
					
										_self.$set(_self.variablesArray, index, imgValue.fileName);
									},
									fail: (uploadErr) => {
										console.log('上传失败', uploadErr);
									}
								});
							},
							fail: (err) => {
								console.log('压缩失败', err);
							}
						});
			
			
					}
				});
			
			},
			// 单选题
			radioChange(event, item, index) {
				var current = 0
				for (let i = 0; i < item.property.length; i++) {
					if (item.property[i].name === event.detail.value) {
						current = i;
						break;
					}
				}
				this.variablesArray[index] = item.property[current].name
			},
			// 多选题
			checkboxChange(event, item, index) {
				var items = item.property,
					values = event.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.name)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.variablesArray[index] = values.sort(); //将其排个序
			},
			recordClick() {
				var _self=this
				
				// this.itemThingCheck = item
				// this.configArray = JSON.parse(item.config)
				this.recordRemark=''
				this.variablesArray=[]
				
				for (var i = 0; i < this.configArray.length; i++) {
					
					if(this.configArray[i].default != '' && this.configArray[i].default != null || this.configArray[i].type == 5){
					
						if(this.configArray[i].type == 5){
							this.variablesArray[i] = this.configArray[i].required==1?true:false
							
						}else{
							this.variablesArray[i] = this.configArray[i].default
						}
						
					}
				}
				
				if(this.itemThingCheck.remark != 1){
					// this.show_popup_bottom_addRecord = true
				}else{
					
					// this.saveTimePlan()
					// uni.showToast({
					// 	title: "记录成功",
					// 	duration: 2000,
					// 	icon: 'none'
					// })
				}
				
				
			},
			saveTimePlan() {
				var _self=this
				
				
				
				// this.variablesArray=[]
				
				// for (var i = 0; i < this.configArray.length; i++) {
					
				// 	if(this.configArray[i].default != '' && this.configArray[i].default != null || this.configArray[i].type == 5){
					
				// 		if(this.configArray[i].type == 5){
				// 			this.variablesArray[i] = this.configArray[i].required==1?true:false
							
				// 		}else{
				// 			this.variablesArray[i] = this.configArray[i].default
				// 		}
						
				// 	}
				// }
				
				
				console.log("============variablesArray============")
				console.log(this.configArray)
				console.log(this.variablesArray)
				if(this.itemThingCheck.remark!=1){
					for (var i = 0; i < this.configArray.length; i++) {
						var required = this.configArray[i].required
						if (required == 1 && (this.variablesArray[i] == '' || this.variablesArray[i] == null || this.variablesArray[i] == undefined)) {
							if(this.configArray[i].type!=5){
								var toast = this.configArray[i].name + "必填"
								uni.showToast({
									title: toast,
									duration: 2000,
									icon: "none"
								});
								return;
							}
							
						}
					}
				}
				
			
				var jsonarr = []
				for (var i = 0; i < this.configArray.length; i++) {
					var name = this.configArray[i].name
					var data = {
						[name]: this.variablesArray[i]
					}
					jsonarr.push(data)
				}
			
				this.show_popup_bottom_addRecord = false
				var data = {
					thingId: this.itemThingCheck.id,
					time: this.recordTime,
					note: this.recordRemark,
					content: JSON.stringify(jsonarr),
				}
			
				console.log(data)
				_self.$api.updateThingRecord(data).then((res) => {
					var resData = res
			
					console.log(res)
					if (resData.code == "200") {
						_self.$emit('refreshList');
					} else {
						uni.showToast({
							title: "保存失败",
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		margin: 0;
	
		background-color: $page-bg !important;
	}
	
	.css-theme {
		@include text-color();
		@include base-background();
		@include border-color();
		@include shadow-color();
	}
	
	
	.container_box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 20rpx;
		// border: 1px solid #f1f1f1;
		margin: 16rpx 0rpx;
		border-radius: 8px;
	}
	
	.container_box_left {
		display: flex;
		align-items: center;
		float: left;
		width: 100%;
	}
	
	.container_box_left input {
		width: 100%;
		float: left;
	}
	
	.container_box_left image {
		width: 20px;
		height: 20px;
	}
	
	.container_box_left text {
		color: #f1f1f1;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}
	
	.image_v {
		margin-left: auto;
	}
	
	.textarea-container {
		display: flex;
		flex-direction: column;
		padding: 10px 20px;
		width: 100%;
	
	}
	
	.textarea-container textarea {
		width: 100%;
		padding: 10px;
		border-radius: 5px;
	}
	
	
	
	.left {
		display: flex;
		align-items: center;
	}
	
	.image {
		width: 20px;
		height: 20px;
	}
	
	.text {
		margin-left: 10px;
		font-size: 14px;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 1;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	
	
	
	.u-grid-item-cls {
	
		width: 30px;
		height: 30px;
		border-radius: 50%;
		line-height: 30px;
		text-align: center;
		font-size: 22px;
	
	}
	
	.iconClass {
		width: 16px;
		height: 16px;
		margin-top: 7px;
	}
	
	.image_v {
		margin-left: auto;
	}
	
	
	.icon-order {
		font-size: 20px;
	}
	
	.write_btn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background-color: $uni-theme-color;
		z-index: 100;
		display: flex;
	
		.icon {
			justify-content: center;
			width: 100%;
			color: #FFFFFF;
			font-size: 50rpx;
			/* #ifdef MP-TOUTIAO */
			// 头条小程序 没居中
			text-align: center;
			padding: 15rpx 0;
			/* #endif */
		}
	}
	
	.classThis {
		position: absolute;
		bottom: 4;
		right: 4;
	
		font-size: 10px;
		border-radius: 10px;
		padding: 1px 4px;
	}
	
	.navbar-right {
		margin-right: 24rpx;
		display: flex;
	}
	
	
	.text-min {
		font-size: 12px;
		color: #ccc;
		margin-top: 5px;
	}
	
	
	.item_box_title {
		line-height: 50px;
		font-weight: bolder;
		font-size: 16px;
		
		
	}
	
	.category-item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
		position: absolute;
		bottom: 20px;
		
	}
	
	.save_btn {
		text-align: right;
		background-color: #18B998;
		color: white;
		width: 150px;
		border-radius: 30px;
		border: none;
		text-align: center;
		height: 42px;
		line-height: 42px;
		
		
		
	}
</style>